<template>
  <div style="padding-bottom: 10px;box-sizing: border-box">

    <a-spin tip="Loading..." :spinning="spin">
      <!--      <div style="background: #fff;">-->
      <!--        <a-row>-->
      <!--          <a-col :span="24" style="padding: 20px 10px 10px 10px;box-sizing: border-box">-->
      <!--            <a-select default-value="计划名称" style="width: 200px; margin-right: 30px;">-->
      <!--            </a-select>-->
      <!--            <a-select default-value="系统名称" style="width: 200px; margin-right: 30px;">-->
      <!--              <a-select-option value="0">-->
      <!--                一号系统-->
      <!--              </a-select-option>-->
      <!--              <a-select-option value="=1">-->
      <!--                二号系统-->
      <!--              </a-select-option>-->
      <!--              <a-select-option value="2">-->
      <!--                未绑定-->
      <!--              </a-select-option>-->
      <!--            </a-select>-->
      <!--            <a-button type="primary" style="background: #3C67F1;border: none;" @click="statusFun">查询</a-button>-->
      <!--          </a-col>-->
      <!--          <a-col :span="24">-->
      <!--            <div-->
      <!--              style="width: 100%; background: #FFFFFF;border-bottom: 1px solid #CED4DA; margin: 15px 0 0;box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);"></div>-->
      <!--          </a-col>-->
      <!--          <a-col :span="24">-->
      <!--            <div-->
      <!--              style="padding: 20px 10px;box-sizing: border-box;display: flex;box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);border-radius: 4px;">-->
      <!--              <div-->
      <!--                style="margin-right:70px;font-weight: bold;font-size: 16px;color: #373F54;font-family: Microsoft YaHei;">-->
      <!--                指令编号：<span style="color: #1D79FA">GG-1903211#0101</span></div>-->
      <!--              <div style="font-size: 16px;font-weight: 500;color: #A1A2A7;font-family: Microsoft YaHei;">轮灌组数：<span-->
      <!--                style="color:#4D5364;">{{ total }}组</span></div>-->
      <!--            </div>-->
      <!--          </a-col>-->
      <!--        </a-row>-->
      <!--      </div>-->
      <a-skeleton v-show="spin" :paragraph="{ rows: 15 }"/>
      <a-empty v-show="list==''"/>
      <div
        style="background: #fff;padding: 10px 0px 0;box-sizing: border-box;margin-top: 18px;box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);border-radius: 4px;"
        v-for="(item,index) in list" :key="index">
        <div
          style="display: flex;align-items: center;justify-content: space-between;padding: 10px 0 20px 0;border-bottom: 1px solid #CED4DA;">
          <div style="display: flex;align-items: center;">
            <img style="margin-right: 20px" src="../../../assets/icon/icon-12.png">
            <div
              style="width: 140px;margin-right: 20px;color: #373F54;font-size: 16px;font-weight: bold;font-family: Microsoft YaHei;">
              计划名称<span style="color:#1D79FA">{{ item.planName }}</span>
            </div>
            <div
              style="margin-right: 60px;color: #373F54;font-size: 16px;font-weight: 400;">
              {{ item.isSystem == '0' ? '一号系统' : item.isSystem == '1' ? '二号系统' : '未绑定' }}
            </div>
            <div style="font-size: 16px;color: #A1A2A7;margin-right: 60px;">
              轮灌组：<span style="color: #4D5364">{{ item.eList.length }}组</span>
            </div>
            <div style="font-size: 16px;color: #A1A2A7;margin-right: 60px;">
              阀门控制：<span style="color: #4D5364">{{ item.deviceNum }}个</span>
            </div>
            <div style="display: flex;color:#FA6161;" v-if="filtersValue(item)">
              <img style="margin-right: 10px" src="../../../assets/icon/yc.png">
              异常
            </div>
          </div>
          <div>
            <!--            <a-switch style="margin-right: 10px;" @change="statusAll(item)" checked-children="全开"-->
            <!--                      un-checked-children="全关"/>-->
            <!--            <a-button size="small" type="primary"-->
            <!--                      style="width: 65px;margin-right:20px;background: #13CE66;border: none;border-radius: 15px;">暂停-->
            <!--            </a-button>-->
          </div>
        </div>
        <div style="display: flex;flex-wrap: wrap;">
          <!--          v-for="(valueList,indexs) in listTemp(item.deviceList)" :key="indexs"-->
          <div
            v-for="(valueList,indexs) in item.eList" :key="indexs"
            style="width: 20%;border-right: 1px solid #CED4DA;border-bottom: 1px solid #CED4DA;display:flex;flex-direction: column;align-items: center;padding-top: 15px;padding-bottom: 10px;height: 280px;overflow: auto"
          >
            <div style="width: 100%;display: flex;align-items: center;justify-content: center">
              <div
                style="width: 140px;font-size: 15px;font-family: Microsoft YaHei;height: 30px;text-align: center;line-height: 30px;background: #E8EFFE;color: #1D79FA;margin-bottom: 20px;font-family: Microsoft YaHei;font-weight: 400;">
                {{ valueList.irrigationName }}
              </div>
            </div>
            <div
              v-for="(cell,i) in valueList.deviceList" :key="i"
              style="display: flex;align-items: center;justify-content: space-between;width: 80%;margin-bottom:15px;">
              <div style="width: 100px;font-weight: bold;font-size: 14px;font-family: Microsoft YaHei;color: #687192;">
                {{ cell.fabrDevice.deviceName }}
              </div>
              <div :class="[cell.fabrDevice.deviceStatus === 'ONLINE' ? 'zc' : 'yc']"
                   style="width: 100px;display: flex;align-items: center;justify-content: center">
                <img
                  :src='cell.fabrDevice.deviceStatus === "ONLINE" ? require("../../../assets/icon/zc.png") : require("../../../assets/icon/yc.png")'>
                <span style="margin-left: 5px;font-size: 15px;font-family: Microsoft YaHei;">{{
                    cell.fabrDevice.deviceStatus === "ONLINE" ? '正常' : '异常'
                  }}</span>
              </div>
              <div style="width: 100px;display: flex;align-items: center;justify-content: flex-end;">
                <a-switch v-model="cell.fabrDevice.deviceValue =='0' ? false : true"
                          :loading="load"
                          :disabled="cell.fabrDevice.deviceStatus == 'ONLINE' ? false :true"
                          @change="onChange(cell.fabrDevice,index)" default-checked/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script>
// 引入接口
import {irrigationGroupLists} from '@/api/meteorological'
import {lgzConPlan, updateDeviceStatus, testDevice} from '@/api/device'

export default {
  data() {
    return {
      list: [],
      spin: true,
      total: '',
      status: false,
      load: false,
      planId: ''
    }
  },
  mounted() {
    this.planId = this.$route.query.planId
    this.dataList()

    // console.log()
  },
  filters: {},
  computed: {},
  methods: {
    // 拆封每一个组多少个
    listTemp(value) {
      // let index = 0;
      // let count = 4;
      // let arrTemp = [];
      // let experts = value;
      // for (let i = 0; i < value.length; i++) {
      //   index = parseInt(i / count);
      //   if (arrTemp.length <= index) {
      //     arrTemp.push([]);
      //   }
      //   arrTemp[index].push(experts[i])
      // }
      // return arrTemp
    },
    // 判断是否有异常阀门
    filtersValue(value) {
      return value.eList.some(item => {
        return item.deviceList.some(items => {
          return items.fabrDevice.deviceStatus != "ONLINE"
        })
      })
    },
    // 数据获取
    dataList() {
      lgzConPlan('', '', this.planId == undefined ? '' : this.planId).then(res => {
        console.log(res)
        this.list = res.result
        this.spin = false
        this.load = false
      }).catch(err => {
      })
    },
    add() {
      this.$refs.OperationRecord.modal2Visible = true
    },
    // 开启单个阀门
    onChange(index, e) {
      console.log(index, e)
      this.load = true
      updateDeviceStatus(index.id).then(res => {
        this.$message.success(`阀门${index.deviceValue == '0' ? '开启' : '关闭'}成功`);
        this.dataList()

      }).catch(err => {
        this.$message.error('阀门操作失败');
        this.load = false
      })
    },
    // 开启所有阀门
    statusAll(index) {
      console.log(index)
      let deviceIds = index.eList.map(item => {
        return item.deviceList.map(items => {
          return items.aliyunDeviceHsb.deviceId
        })
      }).join(',')
      updateDeviceStatus(deviceIds, 1).then(res => {
        console.log(res)
        this.$message.success(`阀门全开成功`);
        this.dataList()
      }).catch(err => {
        this.$message.error('阀门操作失败');
      })
    },
    // 查询
    statusFun() {
      testDevice().then(res => {
        console.log(res)
      }).catch(err => {

      })
    }
  }
}
</script>

<style scoped>
.irrigation {
  border: 1px solid #89C1FB;
  margin: 20px 0;
}

.irrigation-top {
  width: 100%;
  height: 60px;
  background: #F4F6F9;
  box-sizing: border-box;
}

.top-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.value {
  display: flex;
  flex-wrap: wrap;
}

.value-box {
  width: 12%;
  height: 110px;
  margin: 10px 10px 10px 0;
  border: 1px solid #89C1FB;
  border-radius: 10px;
  overflow: hidden;
}

.value-top {
  display: flex;
  justify-content: space-between;
  height: 40px;
  padding: 0 10px;
  background: #EEF5FF;
  align-items: center;
}

.value-cotent {
  width: 100%;
  height: 70px;
  text-align: center;
  line-height: 70px;
  background: #fff;
}

.irrigation-bottom {
  display: flex;
  padding: 20px 10px;
}

.bottom-box {
  margin-right: 100px;
}

/deep/ .ant-switch-checked {
  background-color: #409EFF;
}

.yc {
  color: #FA6161;
}

/deep/ .ant-skeleton-content .ant-skeleton-title {
  background: #fff;
}

/deep/ .ant-skeleton-content .ant-skeleton-paragraph > li {
  background: #fff;
}
</style>